/**
 * @description 嗨豆
 */
import style from './styles/Detail.less';
import classnames from "classnames";
import React, { Component } from 'react';
import util from "commons/util";
//img
import norecord from 'images/norecord.png';
import * as beans from 'api_xukaiyu/app/beans'


let statusList = [{ name: '收入', status: '0' }, { name: '支出', status: '1' }]
class Detail extends React.Component {
  constructor() {
    super();
    this.state = {
      records: [],//列表
      page: 1, // 页数
      isLoading: false,// 正在加载
      noMoreResource: false, // 没有更多资源
      status: '0'
    };
    this.List = React.createRef();
  }

  componentDidMount() {
    this.List.current.addEventListener("scroll", this.onScroll)
    this.getRecords();
  }

  componentWillUnmount() {
    this.List.current.removeEventListener('scroll', this.onScroll);//移除监听滚动
  }


  onScroll = () => {
    let List = this.List.current;
    console.dir(List)
    let bT = List.scrollTop;// body滚动距离
    let bH = List.scrollHeight;// body内容高度
    let wH = List.clientHeight;// 可视区域高
    console.log(bT , wH , 2, bH)
    if (bT + wH + 2 >= bH) { //到达底部时,加载新内容
      this.onEndReached();
    }
  }

  onEndReached() {
    if (this.state.isLoading || this.state.noMoreResource) {
      return;
    }

    this.setState({
      isLoading: true
    });

    this.setState({
      page: this.state.page + 1
    }, () => {
      this.getRecords();
    });
  }

  getRecords() {
    //请求
    let { status, page, records } = this.state;
    beans.flow_list({ flowType: status, page: page, pageSize: 10 }).then(data => {
      this.setState({
        records: records.concat(data.data || [])
      }, () => {
        this.httpCallBack(data.data);
      })
    })

  }

  httpCallBack(backDatas) {

    this.setState({
      isLoading: false
    });

    if (backDatas.length < 10) {
      this.setState({
        noMoreResource: true
      });
    } else {
      this.setState({
        noMoreResource: false
      });
    }
  }

  render() {
    let { status, records } = this.state;
    return (<div className={style.Detail}>
      <div className={style.navBar}>
        {
          statusList.map(item => {
            return <div key={item.status} onClick={() => {
              this.setState({
                status: item.status,
                page:1,
                records:[]
              },()=>{
                this.getRecords()
              })
            }} className={classnames(style.item, { [style.active]: status == item.status })}>{item.name}</div>
          })
        }
      </div>
      <div className={style.List} ref={this.List}>
        {
          records.length ? records.map((item, index) => {
            return <div key={index} className={style.Item}>
              <div className={style.main}>
                <div className={style.title}>{item.changeReason}</div>
                <div className={style.shop}><span hidden={!item.goodsName}>商品名称：{item.goodsName}</span> </div>
                <div className={style.time}>{item.gmtCreated}</div>

              </div>
              <div className={style.num}>{status=='0'?'+':'-'} {item.beanNums}</div>
            </div>
          }) :
            <div className={style.norecord}>
              <img src={norecord} alt="" />
              <div>列表暂无信息</div>
            </div>
        }
      </div>
    </div>);
  }
}

export default Detail;